import { Button, Drawer, Input, Space } from "antd";
import styles from "./Clipboard.module.css";
// import { useBackendContext } from "../../../../context/Backend";
import { Suspense, useEffect, useRef, useState } from "react";
// import { toast } from "../../../../components/Toast/Toast";
import React from "react";
import { clipboardApi } from "../../../../utils/backend/server";
import { MemoList } from "../Memo/Memo";
import { useAppDispatch, useAppSelector } from "../../../../utils/store/hooks";
import { fetchMemoList } from "../../../../utils/store/MemoSlice";
import {
  fetchClipboard,
  setClipboard,
  stashClipboard,
  toDocx,
} from "../../../../utils/store/clipboardSlice";
import _ from "lodash";
import { RichTextEditor } from "./Editor/RichTextEditor";

export interface ClipboardType {
  id: string;
  content: string;
}

export default (): JSX.Element => {
  const loading = useAppSelector((store) => store.clipboard).loading;
  const [showList, setShowList] = useState<boolean>(false);
  const dispatch = useAppDispatch();
  return (
    <div className={styles.box}>
      <div className={styles.topBox}>
        <Button onClick={() => dispatch(fetchClipboard())}>
          <img
            src="./refresh.png"
            className={[styles.refresh, loading ? styles.loading : ""].join(
              " "
            )}
          />
        </Button>
        <Button
          onClick={async () => {
            await clipboardApi.setClipboard("");
            dispatch(setClipboard(""));
          }}
        >
          Clear
        </Button>
      </div>
      <RichTextEditor />
      <Space className={styles.butBox}>
        <Button
          onClick={async () => {
            dispatch(toDocx());
          }}
          type="primary"
        >
          docx
        </Button>
        <Button
          onClick={async () => {
            dispatch(stashClipboard());
          }}
          type="primary"
        >
          stash
        </Button>

        <Button onClick={() => setShowList(true)} type="primary">
          List
        </Button>
      </Space>

      <DrawerMemoList show={showList} close={() => setShowList(false)} />
    </div>
  );
};

const DrawerMemoList = (props: { show: boolean; close: () => void }) => {
  const dispatch = useAppDispatch();
  // const [list, setList] = useState<MemoItem[]>([]);
  useEffect(() => {
    if (!props.show) return;
    // refreshMemoList(setList);
    dispatch(fetchMemoList({}));
  }, [props.show]);

  return (
    <Drawer
      placement="top"
      title="Focusing..."
      open={props.show}
      onClose={props.close}
      size="large"
    >
      {/* 
        refresh={() => refreshMemoList(setList)}
        list={list}
        setList={setList}
        exchangeSeq={exchangeSeq}
      */}
      <MemoList />
    </Drawer>
  );
};
